import {Form, Input, Modal, Select,message} from 'antd';
import {FormComponentProps} from 'antd/es/form';
import React, {Component} from 'react';
import {queryUser, addUser, updateUser, removeUser, queryClassgrade} from '../service';
import request from "umi-request";

const FormItem = Form.Item;

interface CreateFormProps extends FormComponentProps {
  modalVisible: boolean;
  onSubmit: (fieldsValue: any) => void;
  onCancel: () => void;
}

class CreateForm extends Component<CreateFormProps> {
  constructor(props: CreateFormProps) {
    super(props);
    this.state = {
      checkFormUserName:{},
      checkFormstudentNumber:{}
    };
  }
  formRef = React.createRef();
  componentWillMount = async () => {
    try {
      let classgrade = await queryClassgrade();
      let classgrade_option: any = [];
      classgrade.data.map((data) => {
        classgrade_option.push(<Option value={data.id} key={data.key}>{data.name}</Option>);
      })
      this.setState({
        classgrade: classgrade_option
      })
    }
    finally {

    }
  }

  render() {
    const {modalVisible, form, onSubmit: handleAdd, onCancel} = this.props;
    const {Option} = Select;
    const okHandle = () => {
      let {validateFields} =  this.formRef.current;
      if(this.state.checkFormUserName=='error' || this.state.checkFormstudentNumber=='error'){
        message.error("有重名");
        return;
      }
      validateFields().then(values=>{
        if (values.class_id == undefined || values.permissions == undefined || values.permissions == NaN) {
          message.error("请选择权限或班级");
          return;
        }
        values.permissions = +values.permissions;
        handleAdd(values);
      })
    };

    function handleChange(value) {
      console.log(`selected ${value}`);
    }

    function onChange(value) {
      console.log(`selected ${value}`);
    }

    function onBlur() {
      console.log('blur');
    }

    function onFocus() {
      console.log('focus');
    }

    function onSearch(val) {
      console.log('search:', val);
    }

    const onUserNameChange = event => {
      console.log(event.target.value)
      request.post('/api/checkusername', {
        data: {
          username:event.target.value
        }
      }).then((response) => {
        console.log(response);
        if (response.code == 200) {
          this.setState({
            checkFormUserName : 'success'
          })

        }else{
          message.error(response.msg);
          this.setState({
            checkFormUserName : 'error',
          })
        }

      })
    };
    const onNumberChange = event => {
      console.log(event.target.value)
      request.post('/api/checkstudentnumber', {
        data: {
          student_number:event.target.value
        }
      }).then((response) => {
        console.log(response);
        if (response.code == 200) {
          this.setState({
            checkFormstudentNumber :  'success',
        })
        }else{
          message.error(response.msg);
          this.setState({
            checkFormstudentNumber : 'error',

        })
        }
      })
    };
    return (
      <Modal
        destroyOnClose
        title="新建用户"
        visible={modalVisible}
        onOk={okHandle}
        onCancel={() => onCancel()}
      >
        <Form
          ref={this.formRef}>
        <FormItem
          labelCol={{
            span: 5,
          }}
          wrapperCol={{
            span: 15,
          }}
          label="姓名"
          name="username"
          rules={[{required: true,message: '请填写！'}]}
          validateStatus={this.state.checkFormUserName}
          hasFeedback
          >
        <Input placeholder="请输入姓名"  onBlur={onUserNameChange} />
      </FormItem>
    <FormItem
      labelCol={{
        span: 5,
      }}
      wrapperCol={{
        span: 15,
      }}
      label="学号或工号"
      name="student_number"
      validateStatus={this.state.checkFormstudentNumber}
      hasFeedback
    >

      <Input placeholder="请输入学号或工号"  type='number' onBlur={onNumberChange}/>
    </FormItem>
    <FormItem
      labelCol={{
        span: 5,
      }}
      wrapperCol={{
        span: 15,
      }}
      label="请选择教室"
      name="class_id"
    >
      <Select
        showSearch
        style={{width: 295}}
        placeholder="选择班级"
        optionFilterProp="children"
        onChange={onChange}
        onFocus={onFocus}
        onBlur={onBlur}
        onSearch={onSearch}
        name="class_id"
        filterOption={(input, option) =>
          option.props.children.toLowerCase().indexOf(input.toLowerCase()) >= 0
        }
      >
        {this.state.classgrade}
      </Select>
    </FormItem>
    <FormItem
      labelCol={{
        span: 5,
      }}
      wrapperCol={{
        span: 15,
      }}
      label="权限"
      name="permissions"
    >
      <Select onChange={handleChange} style={{width: 295}}>
        <Option value="1">超级管理员</Option>
        <Option value="2">管理员</Option>
        <Option value="3">老师</Option>
        <Option value="4">学生</Option>
      </Select>
    </FormItem></Form>
  </Modal>
  )
    ;
  }

};

export default CreateForm;
